<template>
	<view>
		<view class="top">
			成为VIP会员,即可显示完整二维码
		</view>
		<view class="center">
			<view class="content">
				<view class="top">
					<image :src="good_info.img" mode=""></image>
					<text >{{good_info.title}}</text>
				</view>
				<view class="info">
					<template v-if="good_info.order_info != null ">
						<image :src="good_info.qrcode"></image>
					</template>
					<template v-else>
						<image src="../../static/imgs/erwei.png"></image>
					</template>
				</view>
			</view>
		</view>
		<view class="bottom">
			<image src="../../static/imgs/vip_long.png" mode="widthFix"></image>
		</view>
		<button v-if="good_info.order_info == null " class="bottom-float" @tap="requestPay">成为VIP</button>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				user_id:-1,
				good_id:-1,
				user_info:[],
				good_info:[]
			}
		},
		onLoad(e) {
			this.user_info = uni.getStorageSync("userInfo");
			console.log(this.user_info)
			this.good_id = e.good_id;
			this.getGoodInfo();
		},
		methods: {
			getGoodInfo()
			{
				var _this = this;
				if(_this.good_id > 0)
				{
					
					this.$request("good/getGoodInfo",{ good_id:this.good_id },'POST').then(res=>{
						
						this.good_info = res;
						
						uni.setNavigationBarTitle({
							title:res.title
						})
						
					})
					
				}
			},
			requestPay()
			{
				
				this.$request('index/index',{
					good_id:this.good_id,
				},'POST').then(res=>{
					
					// uni.showToast({
					// 	title: res.code
					// });
					
					if(res.code == 1)
					{
						// uni.showToast({
						// 	title: '111'
						// });
						this.pay(res.data);
						
						
						
					}
					
				})
			},
			pay(params)
			{
				var _this = this;
				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId:params.appId, // 必填，公众号的唯一标识
					timestamp:params.timeStamp, // 必填，生成签名的时间戳
					nonceStr:params.nonceStr, // 必填，生成签名的随机串
					signature:params.paySign, // 必填，签名，见附录1
					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				})
				
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {
							console.log('checkjsapi Success')
							console.log(res);
						},
						fail:function(res) {
							console.log('res')
							console.log(res);
						}
					});
					jweixin.chooseWXPay({
						timestamp: params.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
						package: params.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						paySign:params.paySign, // 支付签名
						signType:params.signType,
						success:function(res) 
						{
							console.log('paysuccess')
							console.log(res)
							_this.getGoodInfo();
						},
						cancel: function(r) {
						   var route =  'payResult' + '?type=2'
						   
						},
						fail:function(res) {
						   
							console.log('payfail')
							console.log(res)
							
							
						}
					});
				});
				 
				jweixin.error(function(res) {
					uni.showToast({
						icon: 'none',
						title: '支付失败了',
						duration: 4000
					});
						// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
						/*alert("config信息验证失败");*/
				});

				
			}
			
		}
	}
</script>

<style lang="scss">
	
	.top{
		text-align: center;
		color: #fc0006;
		padding: 1rem;
	}
	
	.center{
		background: #F1F1F1;
		padding: 1rem;
		
		
		.content{
			background: #FFFFFF;
			border-radius: 1rem;
			padding: 1rem;
			
			.top{
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 1rem;
				
				image{
					width: 80rpx;
					height: 80rpx;
				}
				
				text{
					color: #000;
				}
				
			}
			
			.info{
				text-align: center;
				
				image{
					width: 70vw;
					height: 70vw;
				}
				
				
			}
			
		}
	}
	
	.bottom{
		image{
			width: 100%;
		}
	}
	
	.bottom-float{
		position: fixed;
		width: 100%;
		background-color: #54c5c9;
		bottom: 0;
		color: #fff;
	}
	
</style>
